<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step
        v-for="(i, f) in stepsTitle"
        :key="f"
        :title="f == active ? '进行中' : i.title"
        :description="f == active ? 'in progress' : i.description"
        @click.native="handelClickStep(f)"
      />
    </el-steps>
    <div class="main">
      <StepsOne v-if="active == 0" ref="submitOneForm" :data="form" />
      <StepsTwo v-if="active == 1" ref="submitTwoForm" :data="form" />
      <StepsThree
        v-if="active == 2"
        ref="submitThreeForm"
        :data="form"
        @getTaskMode="getTaskMode"
      />
      <StepsFour
        v-if="active == 3"
        ref="submitFourForm"
        :data="form"
        @getTaskMode="getTaskMode"
      />
      <StepsFive
        v-if="active == 4"
        ref="submitFiveForm"
        :data="form"
        @getTaskMode="getTaskMode"
      />
    </div>
    <div class="buttonBox">
      <el-button
        v-if="active > 0"
        size="medium"
        @click.prevent="handleClick('prev')"
      >上一步</el-button>
      <el-button
        v-loading="loading"
        type="primary"
        size="medium"
        @click.prevent="handleClick('next')"
      >{{ active < stepsTitle.length - 1 ? "下一步" : "完成" }}</el-button>
    </div>
  </div>
</template>

<script>
import StepsFour from './components/stepsFour.vue'
import StepsOne from './components/stepsOne.vue'
import StepsThree from './components/stepsThree.vue'
import StepsTwo from './components/stepsTwo.vue'
import StepsFive from './components/stepsFive.vue'
import {
  creactAppraiseTask,
  getTasks,
  updateTasks
} from '@/api/console/tasks.js'

const refsArray = [
  'submitOneForm',
  'submitTwoForm',
  'submitThreeForm',
  'submitFourForm',
  'submitFiveForm'
]
const removeValue = [
  'ip',
  'pwd',
  'port',
  'uname',
  'start',
  'end',
  'baseType',
  'appraiseCountmode',
  'appraiseTaskmode'
]

export default {
  name: 'Steps',
  components: { StepsOne, StepsFour, StepsThree, StepsTwo, StepsFive },
  data() {
    return {
      form: {},
      active: 0,
      stepsTitle: [
        {
          title: '基本信息',
          description: '请在下列中选择一个向导'
        },
        {
          title: '选择数据源',
          description: '请输入数据信息'
        },
        {
          title: '配置评估',
          description: '配置需要评估的项目'
        },
        {
          title: '选择指定对象',
          description: '选择评估对象'
        },
        {
          title: '评估配置预览',
          description: '评估任务配置汇总预览'
        }
      ],
      totalData: {},
      id: null,
      loading: false
    }
  },
  computed: {},
  dicts: ['data_base_type'],
  created() {
    const that = this
    this.$route.meta.title = that.$route.query.id
      ? '修改评估任务'
      : '新增评估任务'
    if (that.$route.query.id) {
      that.id = that.$route.query.id
      getTasks({ id: that.id }).then(({ data }) => {
        data.start = data.taskType.split('-')[0]
        data.end = data.sinkDbTypes.split(',')
        data.taskCount = data.taskCount.split(',')
        data.taskTables = JSON.parse(data.taskTables)
        data.taskWay = String(data.taskWay)
        data.strategy = String(data.strategy)
        that.form = data
      })
    }
  },
  methods: {
    handelClickStep(f) {
      if (this.active >= f || this.$route.query.id) {
        this.active = f
        return
      }
    },
    handleClick(status) {
      const that = this
      const leg = that.stepsTitle.length - 1
      const fun = {
        next() {
          if (that.active === 4) {
            that.loading = true
            that.dataFusion(that.form)
            return
          }
          if (that.active++ > leg) that.active = leg
        },
        prev() {
          if (that.active-- < 0) that.active = leg
        }
      }
      if (
        status === 'next' &&
        !this.id &&
        this.$refs[refsArray[this.active]].$refs.form
      ) {
        this.$refs[refsArray[this.active]].$refs.form.validate((valid) => {
          if (valid) {
            fun[status]()
            return
          }
        })
        return
      }

      fun[status]()
      return false
    },
    async dataFusion(form) {
      form.taskType = `${form.start}-${form.end}`
      form.sinkDbTypes = form.end.join(',')
      form.taskWay = Number(form.taskWay)
      form.taskCount =
        typeof form.taskCount === 'object'
          ? form.taskCount.join(',')
          : form.taskCount
      if (form.taskTables.length > 0) {
        form.taskTables.forEach((f, i) => {
          form.taskTables[i] = { schema: f.schema, table: f.name }
        })
      }
      form.taskTables = JSON.stringify(form.taskTables || [])
      removeValue.forEach((f) => delete form[f])
      if (this.id) {
        form.id = this.id
      }
      try {
        const res = this.id
          ? await updateTasks(form)
          : await creactAppraiseTask(form)
        this.$message.success(res.msg)
        this.loading = false
        setTimeout(() => {
          this.$router.push('/taskProcedure')
        }, 500)
      } catch (error) {
        this.$message.success(error.msg)
        this.loading = false
      }
      return false
    },
    async getTaskMode(_data) {
      // let selectTaskMode = [];
      const mode = await this.getDicts('appraise_tasktype')
      let type = await this.getDicts('db_object_type')
      type = type.data
        .find((f) => {
          return f.dictLabel === this.form.start
        })
        .dictValue.split(',')
      mode.data.forEach((f) => {
        const value = f.dictValue.toUpperCase().toLowerCase().split('_')[1]
        if (type.includes(value)) {
          _data.push({
            text: f.dictLabel,
            value: f.dictValue
          })
          return
        }
      })
      _data.unshift({
        text: '全部评估',
        value: 'EVALUATE_MIGRATION'
      })
      return _data
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  width: 80%;
  margin: 0 auto;
  .buttonBox {
    margin: 40px auto;
    width: 87%;
    text-align: center;
  }

  .main {
    width: 87%;
    margin: 0 auto;
  }
}
</style>
